<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <meta name="description" content="Ant Design of Vue特性
提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Vue 组件。
共享Ant Design of React设计工具体系。

支持环境
现代浏览器和 IE9 及以上（需要 polyfills）。

支持服务端渲染。

Electron
版本
稳定" />
  

  
  
  
  
  
  
  <title>Ant | 南辞的技术博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="Ant Design of Vue特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Vue 组件。 共享Ant Design of React设计工具体系。  支持环境 现代浏览器和 IE9 及以上（需要 polyfills）。  支持服务端渲染。  Electron 版本 稳定版：    安装使用 npm 或 yarn 安装12$ npm install ant-desig">
<meta property="og:type" content="article">
<meta property="og:title" content="Ant">
<meta property="og:url" content="https://yanlidoushikeke.gitee.io/myhexo/2021/03/01/Ant/index.html">
<meta property="og:site_name" content="南辞的技术博客">
<meta property="og:description" content="Ant Design of Vue特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Vue 组件。 共享Ant Design of React设计工具体系。  支持环境 现代浏览器和 IE9 及以上（需要 polyfills）。  支持服务端渲染。  Electron 版本 稳定版：    安装使用 npm 或 yarn 安装12$ npm install ant-desig">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square">
<meta property="article:published_time" content="2021-03-01T06:42:33.000Z">
<meta property="article:modified_time" content="2021-03-01T08:57:07.951Z">
<meta property="article:author" content="南辞">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square">
  
  
    <link rel="icon" href="/tefuir/css/images/favicon.ico">
  
  
<link rel="stylesheet" href="/tefuir/css/style.css">

  

  
  <!-- baidu webmaster push -->
  <script src='//push.zhanzhang.baidu.com/push.js'></script>
<meta name="generator" content="Hexo 5.2.0"><link rel="alternate" href="/tefuir/atom.xml" title="南辞的技术博客" type="application/atom+xml">
</head>
<body class="home blog custom-background custom-font-enabled single-author">
  <div id="page" class="hfeed site">
      <header id="masthead" class="site-header" role="banner">
    <hgroup>
      <h1 class="site-title">
        <a href="/tefuir/" title="南辞的技术博客" rel="home">南辞的技术博客</a>
      </h1>
      
        <h2 class="site-description hitokoto"></h2>
        <script type="text/javascript" src="https://v1.hitokoto.cn/?encode=js"></script>
      
    </hgroup>

    <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">菜单</button>
            <a class="assistive-text" href="/#content" title="跳至内容">跳至内容</a><!--TODO-->
            <div class="menu-main-container">
                <ul id="menu-main" class="nav-menu">
                
                    <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/tefuir/">Home</a></li>
                
                    <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/tefuir/archives">Archives</a></li>
                
                </ul>
            </div>
    </nav>
</header>

      <div id="main" class="wrapper">
        <div id="primary" class="site-content"><div id="content" role="main"><article id="post-Ant" class="post-Ant post type-post status-publish format-standard hentry">
    <!---->

      <header class="entry-header">
        
        
  
    <h1 class="entry-title article-title">
      Ant
    </h1>
  

        
        <div class="comments-link">
            
            <a href="javascript:void(0);" data-url="https://yanlidoushikeke.gitee.io/myhexo/2021/03/01/Ant/" data-id="cklqcenul0000tsu04ckr45gk" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
        </div><!-- .comments-link -->
      </header><!-- .entry-header -->

    <div class="entry-content">
      
        <ul>
<li><h1 id="Ant-Design-of-Vue"><a href="#Ant-Design-of-Vue" class="headerlink" title="Ant Design of Vue"></a>Ant Design of Vue</h1><h3 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h3><ul>
<li>提炼自企业级中后台产品的交互语言和视觉风格。</li>
<li>开箱即用的高质量 Vue 组件。</li>
<li>共享<a target="_blank" rel="noopener" href="http://ant-design.gitee.io/docs/spec/introduce-cn">Ant Design of React</a>设计工具体系。</li>
</ul>
<h3 id="支持环境"><a href="#支持环境" class="headerlink" title="支持环境"></a>支持环境</h3><ul>
<li><p>现代浏览器和 IE9 及以上（需要 <a target="_blank" rel="noopener" href="https://www.antdv.com/docs/vue/getting-started-cn/#%E5%85%BC%E5%AE%B9%E6%80%A7">polyfills</a>）。</p>
</li>
<li><p>支持服务端渲染。</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://electronjs.org/">Electron</a></p>
<h4 id="版本"><a href="#版本" class="headerlink" title="版本"></a>版本</h4><ul>
<li>稳定版：<a target="_blank" rel="noopener" href="https://www.npmjs.org/package/ant-design-vue"><img src="https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square" alt="npm package"></a></li>
</ul>
</li>
</ul>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><h3 id="使用-npm-或-yarn-安装"><a href="#使用-npm-或-yarn-安装" class="headerlink" title="使用 npm 或 yarn 安装"></a>使用 npm 或 yarn 安装</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm install ant-design-vue --save</span><br><span class="line">$ yarn add ant-design-vue</span><br></pre></td></tr></table></figure>

<h3 id="浏览器引入"><a href="#浏览器引入" class="headerlink" title="浏览器引入"></a>浏览器引入</h3><p><code>ant-design-vue/dist</code> </p>
<h3 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#39;vue&#39;;</span><br><span class="line">import &#123; DatePicker &#125; from &#39;ant-design-vue&#39;;</span><br><span class="line">Vue.use(DatePicker);</span><br></pre></td></tr></table></figure>

<p>引入样式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import &#39;ant-design-vue&#x2F;dist&#x2F;antd.css&#39;; </span><br></pre></td></tr></table></figure>

<h3 id="按需加载"><a href="#按需加载" class="headerlink" title="按需加载"></a>按需加载</h3><p>下面两种方式都可以只加载用到的组件。</p>
<ul>
<li><p>使用 <a target="_blank" rel="noopener" href="https://github.com/ant-design/babel-plugin-import">babel-plugin-import</a>（推荐）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; .babelrc or babel-loader option</span><br><span class="line">&#123;</span><br><span class="line">  &quot;plugins&quot;: [</span><br><span class="line">    [&quot;import&quot;, &#123; &quot;libraryName&quot;: &quot;ant-design-vue&quot;, &quot;libraryDirectory&quot;: &quot;es&quot;, &quot;style&quot;: &quot;css&quot; &#125;] &#x2F;&#x2F; &#96;style: true&#96; 会加载 less 文件</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：webpack 1 无需设置 <code>libraryDirectory</code>。</p>
</blockquote>
<p>然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; babel-plugin-import 会帮助你加载 JS 和 CSS</span><br><span class="line">import &#123; DatePicker &#125; from &#39;ant-design-vue&#39;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>手动引入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import DatePicker from &#39;ant-design-vue&#x2F;lib&#x2F;date-picker&#39;; &#x2F;&#x2F; 加载 JS</span><br><span class="line">import &#39;ant-design-vue&#x2F;lib&#x2F;date-picker&#x2F;style&#x2F;css&#39;; &#x2F;&#x2F; 加载 CSS</span><br><span class="line">&#x2F;&#x2F; import &#39;ant-design-vue&#x2F;lib&#x2F;date-picker&#x2F;style&#39;;         &#x2F;&#x2F; 加载 LESS</span><br></pre></td></tr></table></figure>

</li>
</ul>
</li>
</ul>
<h2 id="vue-cli引入-ant-design-vue"><a href="#vue-cli引入-ant-design-vue" class="headerlink" title="vue-cli引入 ant-design-vue"></a>vue-cli引入 ant-design-vue</h2><h5 id="1-安装脚手架工具"><a href="#1-安装脚手架工具" class="headerlink" title="1. 安装脚手架工具"></a>1. 安装脚手架工具</h5><p>​    $ npm install -g @vue/cli</p>
<p>​    #或者</p>
<p>​       $ yarn global add @vue/cli</p>
<h5 id="新建一个项目"><a href="#新建一个项目" class="headerlink" title="新建一个项目"></a>新建一个项目</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vue create antd-demo</span><br></pre></td></tr></table></figure>

<h5 id="进入项目并启动"><a href="#进入项目并启动" class="headerlink" title="进入项目并启动"></a>进入项目并启动</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ cd antd-demo</span><br><span class="line">$ npm run serve</span><br></pre></td></tr></table></figure>

<p>此时浏览器会访问 <a target="_blank" rel="noopener" href="http://localhost:8080/">http://localhost:8080/</a> ，看到 <code>Welcome to Your Vue.js App</code> 的界面就算成功了。</p>
<h2 id="引入-antd"><a href="#引入-antd" class="headerlink" title="引入 antd"></a>引入 antd</h2><p>这是 vue-cli 生成的默认目录结构。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">├── README.md</span><br><span class="line">├── babel.config</span><br><span class="line">├── package.json</span><br><span class="line">├── public</span><br><span class="line">│   ├── favicon.ico</span><br><span class="line">│   └── index.html</span><br><span class="line">├── src</span><br><span class="line">│   ├── assets</span><br><span class="line">│   │   └── logo.png</span><br><span class="line">│   ├── components</span><br><span class="line">│   │   └── HelloWorld.vue</span><br><span class="line">│   ├── App.vue</span><br><span class="line">│   └── main.js</span><br><span class="line">└── yarn.lock</span><br></pre></td></tr></table></figure>

<p>现在从 yarn 或 npm 安装并引入 ant-design-vue。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ yarn add ant-design-vue</span><br></pre></td></tr></table></figure>

<p>修改 <code>src/main.js</code>，引入 antd 的按钮组件以及全部样式文件。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#39;vue&#39;;</span><br><span class="line">import Button from &#39;ant-design-vue&#x2F;lib&#x2F;button&#39;;</span><br><span class="line">import &#39;ant-design-vue&#x2F;dist&#x2F;antd.css&#39;;</span><br><span class="line">import App from &#39;.&#x2F;App&#39;;</span><br><span class="line"></span><br><span class="line">Vue.component(Button.name, Button);</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip &#x3D; false;</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  render: h &#x3D;&gt; h(App),</span><br><span class="line">&#125;).$mount(&#39;#app&#39;);</span><br></pre></td></tr></table></figure>

<p>修改 <code>src/App.vue</code>的 template 内容。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">    &lt;img src&#x3D;&quot;.&#x2F;assets&#x2F;logo.png&quot;&gt;</span><br><span class="line">    &lt;a-button type&#x3D;&quot;primary&quot;&gt;Button&gt;&lt;&#x2F;a-button&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">...</span><br></pre></td></tr></table></figure>

<p>好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的<a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-cli/blob/master/README.md">官方文档</a>。</p>
<h2 id="高级配置"><a href="#高级配置" class="headerlink" title="高级配置"></a>高级配置</h2><p>我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。</p>
<p>此时我们需要对 vue-cli 的默认配置进行自定义。</p>
<h3 id="使用-babel-plugin-import"><a href="#使用-babel-plugin-import" class="headerlink" title="使用 babel-plugin-import"></a>使用 babel-plugin-import</h3><p><a target="_blank" rel="noopener" href="https://github.com/ant-design/babel-plugin-import">babel-plugin-import</a> 是一个用于按需加载组件代码和样式的 babel 插件（<a target="_blank" rel="noopener" href="https://www.antdv.com/docs/vue/getting-started-cn/#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD">原理</a>）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ yarn add babel-plugin-import --dev</span><br></pre></td></tr></table></figure>

<h4 id="使用-vue-cli-2-的小伙伴"><a href="#使用-vue-cli-2-的小伙伴" class="headerlink" title="使用 vue-cli 2 的小伙伴"></a>使用 vue-cli 2 的小伙伴</h4><p>修改<code>.babelrc</code>文件，配置 babel-plugin-import</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">  &#123;</span><br><span class="line">    &quot;presets&quot;: [</span><br><span class="line">      [&quot;env&quot;, &#123;</span><br><span class="line">        &quot;modules&quot;: false,</span><br><span class="line">        &quot;targets&quot;: &#123;</span><br><span class="line">          &quot;browsers&quot;: [&quot;&gt; 1%&quot;, &quot;last 2 versions&quot;, &quot;not ie &lt;&#x3D; 8&quot;]</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;],</span><br><span class="line">      &quot;stage-2&quot;</span><br><span class="line">    ],</span><br><span class="line">-   &quot;plugins&quot;: [&quot;transform-vue-jsx&quot;, &quot;transform-runtime&quot;]</span><br><span class="line">+   &quot;plugins&quot;: [</span><br><span class="line">+     &quot;transform-vue-jsx&quot;,</span><br><span class="line">+     &quot;transform-runtime&quot;,</span><br><span class="line">+     [&quot;import&quot;, &#123; &quot;libraryName&quot;: &quot;ant-design-vue&quot;, &quot;libraryDirectory&quot;: &quot;es&quot;, &quot;style&quot;: &quot;css&quot; &#125;]</span><br><span class="line">+   ]</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="使用-vue-cli-3-的小伙伴"><a href="#使用-vue-cli-3-的小伙伴" class="headerlink" title="使用 vue-cli 3 的小伙伴"></a>使用 vue-cli 3 的小伙伴</h4><p>修改<code>babel.config.js</code>文件，配置 babel-plugin-import</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> module.exports &#x3D; &#123;</span><br><span class="line">  presets: [&quot;@vue&#x2F;app&quot;],</span><br><span class="line">+  plugins: [</span><br><span class="line">+    [</span><br><span class="line">+      &quot;import&quot;,</span><br><span class="line">+      &#123; libraryName: &quot;ant-design-vue&quot;, libraryDirectory: &quot;es&quot;, style: true &#125;</span><br><span class="line">+    ]</span><br><span class="line">+  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>然后移除前面在 <code>src/main.js</code> 里全量添加的 <code>import &#39;ant-design-vue/dist/antd.css&#39;;</code> 样式代码，并且按下面的格式引入模块。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">  &#x2F;&#x2F; src&#x2F;main.js</span><br><span class="line">  import Vue from &#39;vue&#39;</span><br><span class="line">- import Button from &#39;ant-design-vue&#x2F;lib&#x2F;button&#39;;</span><br><span class="line">+ import &#123; Button &#125; from &#39;ant-design-vue&#39;;</span><br><span class="line">- import &#39;ant-design-vue&#x2F;dist&#x2F;antd.css&#39;</span><br><span class="line">  import App from &#39;.&#x2F;App&#39;</span><br><span class="line"></span><br><span class="line">  Vue.component(Button.name, Button)</span><br><span class="line"></span><br><span class="line">  Vue.config.productionTip &#x3D; false</span><br><span class="line"></span><br><span class="line">  new Vue(&#123;</span><br><span class="line">    render: h &#x3D;&gt; h(App)</span><br><span class="line">  &#125;).$mount(&quot;#app&quot;);</span><br></pre></td></tr></table></figure>

<p>最后重启 <code>npm run serve</code> 访问页面</p>
<h4 id="主题定制"><a href="#主题定制" class="headerlink" title="主题定制"></a>主题定制</h4><p><a target="_blank" rel="noopener" href="https://www.antdv.com/docs/vue/customize-theme-cn/">https://www.antdv.com/docs/vue/customize-theme-cn/</a></p>
<h1 id="国际化"><a href="#国际化" class="headerlink" title="国际化"></a>国际化</h1><p><code>ant-design-vue</code> 目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。</p>
<h2 id="LocaleProvider"><a href="#LocaleProvider" class="headerlink" title="LocaleProvider"></a>LocaleProvider</h2><p>ant-design-vue 提供了一个 Vue 组件 <a target="_blank" rel="noopener" href="https://www.antdv.com/components/locale-provider-cn">LocaleProvider</a> 用于全局配置国际化文案。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;a-locale-provider :locale&#x3D;&quot;locale&quot;&gt;</span><br><span class="line">    &lt;App &#x2F;&gt;</span><br><span class="line">  &lt;&#x2F;a-locale-provider&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  import zhCN from &#39;ant-design-vue&#x2F;lib&#x2F;locale-provider&#x2F;zh_CN&#39;;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        locale: zhCN,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<p>注意：<code>zh_CN</code> 是文件名，以下表格也遵循同样的规则。</p>
<h3 id="Button-按钮"><a href="#Button-按钮" class="headerlink" title="Button 按钮"></a>Button 按钮</h3><h5 id="何时使用"><a href="#何时使用" class="headerlink" title="何时使用"></a>何时使用</h5><p>标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。</p>
<h5 id="组件注册"><a href="#组件注册" class="headerlink" title="组件注册"></a>组件注册</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import &#123; Button &#125; from &#39;ant-design-vue&#39;;</span><br><span class="line">Vue.use(Button);</span><br></pre></td></tr></table></figure>

<h3 id="下拉菜单"><a href="#下拉菜单" class="headerlink" title="下拉菜单"></a>下拉菜单</h3><p>​   </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;a-menu slot&#x3D;&quot;overlay&quot;&gt;</span><br><span class="line"></span><br><span class="line">     &lt;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">       1st menu item</span><br><span class="line"></span><br><span class="line">     &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">     &lt;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">       2nd menu item</span><br><span class="line"></span><br><span class="line">     &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">     &lt;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">       3rd menu item</span><br><span class="line"></span><br><span class="line">     &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">   &lt;&#x2F;a-menu&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="Menu-导航菜单"><a href="#Menu-导航菜单" class="headerlink" title="Menu 导航菜单"></a>Menu 导航菜单</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line"></span><br><span class="line">  &lt;div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;a-menu v-model&#x3D;&quot;current&quot; mode&#x3D;&quot;horizontal&quot;&gt;</span><br><span class="line"></span><br><span class="line">      &lt;a-menu-item key&#x3D;&quot;mail&quot;&gt; &lt;a-icon type&#x3D;&quot;mail&quot; &#x2F;&gt;Navigation One &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">      &lt;a-menu-item key&#x3D;&quot;app&quot; disabled&gt; &lt;a-icon type&#x3D;&quot;appstore&quot; &#x2F;&gt;Navigation Two &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">      &lt;a-sub-menu&gt;</span><br><span class="line"></span><br><span class="line">        &lt;span slot&#x3D;&quot;title&quot; class&#x3D;&quot;submenu-title-wrapper&quot;</span><br><span class="line"></span><br><span class="line">          &gt;&lt;a-icon type&#x3D;&quot;setting&quot; &#x2F;&gt;Navigation Three - Submenu&lt;&#x2F;span</span><br><span class="line"></span><br><span class="line">        &gt;</span><br><span class="line"></span><br><span class="line">        &lt;a-menu-item-group title&#x3D;&quot;Item 1&quot;&gt;</span><br><span class="line"></span><br><span class="line">          &lt;a-menu-item key&#x3D;&quot;setting:1&quot;&gt;</span><br><span class="line"></span><br><span class="line">            Option 1</span><br><span class="line"></span><br><span class="line">          &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">          &lt;a-menu-item key&#x3D;&quot;setting:2&quot;&gt;</span><br><span class="line"></span><br><span class="line">            Option 2</span><br><span class="line"></span><br><span class="line">          &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">        &lt;&#x2F;a-menu-item-group&gt;</span><br><span class="line"></span><br><span class="line">        &lt;a-menu-item-group title&#x3D;&quot;Item 2&quot;&gt;</span><br><span class="line"></span><br><span class="line">          &lt;a-menu-item key&#x3D;&quot;setting:3&quot;&gt;</span><br><span class="line"></span><br><span class="line">            Option 3</span><br><span class="line"></span><br><span class="line">          &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">          &lt;a-menu-item key&#x3D;&quot;setting:4&quot;&gt;</span><br><span class="line"></span><br><span class="line">            Option 4</span><br><span class="line"></span><br><span class="line">          &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">        &lt;&#x2F;a-menu-item-group&gt;</span><br><span class="line"></span><br><span class="line">      &lt;&#x2F;a-sub-menu&gt;</span><br><span class="line"></span><br><span class="line">      &lt;a-menu-item key&#x3D;&quot;alipay&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;a href&#x3D;&quot;https:&#x2F;&#x2F;antdv.com&quot; target&#x3D;&quot;_blank&quot; rel&#x3D;&quot;noopener noreferrer&quot;</span><br><span class="line"></span><br><span class="line">          &gt;Navigation Four - Link&lt;&#x2F;a</span><br><span class="line"></span><br><span class="line">        &gt;</span><br><span class="line"></span><br><span class="line">      &lt;&#x2F;a-menu-item&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;a-menu&gt;</span><br><span class="line"></span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line"></span><br><span class="line">  data() &#123;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line"></span><br><span class="line">      current: [&#39;mail&#39;],</span><br><span class="line"></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="Pagination-分页"><a href="#Pagination-分页" class="headerlink" title="Pagination 分页"></a>Pagination 分页</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line"></span><br><span class="line">  &lt;a-pagination v-model&#x3D;&quot;current&quot; :total&#x3D;&quot;50&quot; show-less-items &#x2F;&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line"></span><br><span class="line">  data() &#123;</span><br><span class="line"></span><br><span class="line">    return &#123;</span><br><span class="line"></span><br><span class="line">      current: 2,</span><br><span class="line"></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="多选框"><a href="#多选框" class="headerlink" title="多选框"></a>多选框</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;a-checkbox @change&#x3D;&quot;onChange&quot;&gt;</span><br><span class="line">    Checkbox</span><br><span class="line">  &lt;&#x2F;a-checkbox&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  methods: &#123;</span><br><span class="line">    onChange(e) &#123;</span><br><span class="line">      console.log(&#96;checked &#x3D; $&#123;e.target.checked&#125;&#96;);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>更多详细内容网址如下</p>
<p><a target="_blank" rel="noopener" href="https://www.antdv.com/components/pagination-cn/">https://www.antdv.com/components/pagination-cn/</a></p>

      
    </div><!-- .entry-content -->

    <footer class="entry-meta">
    <a href="/tefuir/2021/03/01/Ant/">
    <time datetime="2021-03-01T06:42:33.000Z" class="entry-date">
        2021-03-01
    </time>
</a>
    
    
    </footer>
</article>


    
<nav class="nav-single">
    <h3 class="assistive-text">文章导航</h3>
    
        <span class="nav-previous"><a href="/tefuir/2021/03/02/%E9%92%89%E9%92%89%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9C%BA%E5%99%A8%E4%BA%BA%E6%8E%A5%E5%85%A5/" rel="prev"><span class="meta-nav">←</span> 钉钉自定义机器人接入</a></span>
    
    
        <span class="nav-next"><a href="/tefuir/2021/02/19/Dockor%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/" rel="next">Dockor的基本使用 <span class="meta-nav">→</span></a></span>
    
</nav><!-- .nav-single -->







</div></div>
        <div id="secondary" class="widget-area" role="complementary">
  
    <aside id="search" class="widget widget_search"><form role="search" method="get" accept-charset="utf-8" id="searchform" class="searchform" action="//google.com/search">
    <div>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="搜索" />
    </div>
</form></aside>
  
    
  
    
  
    
  <aside class="widget">
    <h3 class="widget-title">Recents</h3>
    <div class="widget-content">
      <ul>
        
          <li>
            <a href="/tefuir/2021/04/26/python%E5%9F%BA%E7%A1%80%E7%90%86%E8%AE%BA%E5%AE%9D%E5%85%B8/">python基础理论宝典</a>
          </li>
        
          <li>
            <a href="/tefuir/2021/04/23/python3-Flask%E7%BB%93%E5%90%88Socket-io%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D%E7%B3%BB%E7%BB%9F/">python3+Flask结合Socket.io简单实现在线客服系统</a>
          </li>
        
          <li>
            <a href="/tefuir/2021/04/23/win10%E7%B3%BB%E7%BB%9F%E4%B8%8B%E5%88%A9%E7%94%A8docker%E9%83%A8%E7%BD%B2gunicorn-Flask%E6%89%93%E9%80%A0%E7%8B%AC%E7%AB%8B%E9%95%9C%E5%83%8F/">win10系统下利用docker部署gunicorn+Flask打造独立镜像</a>
          </li>
        
          <li>
            <a href="/tefuir/2021/04/23/win10%E7%B3%BB%E7%BB%9F%E4%B8%8B%E5%9F%BA%E4%BA%8Edocker%E9%85%8D%E7%BD%AEelasticsearch%E9%85%8D%E5%90%88python3%E8%BF%9B%E8%A1%8C%E5%85%A8%E6%96%87%E6%A3%80%E7%B4%A2/">win10系统下基于docker配置elasticsearch配合python3进行全文检索</a>
          </li>
        
          <li>
            <a href="/tefuir/2021/04/23/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%97%AE%E9%A2%98/">服务器问题</a>
          </li>
        
      </ul>
    </div>
  </aside>

  
    
  
    
  
</div>
      </div>
      <footer id="colophon" role="contentinfo">
    <p>&copy; 2021 南辞
    All rights reserved.</p>
    <p>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></p>
</footer>
    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/js/share.js'];</script>

<script src="/js/jquery-3.3.1.min.js"></script>


  
<link rel="stylesheet" href="/tefuir/fancybox/jquery.fancybox.css">

  
<script src="/tefuir/fancybox/jquery.fancybox.pack.js"></script>




<script src="/tefuir/js/script.js"></script>


<script src="/js/navigation.js"></script>

<div id="bg"></div>

  </div>
</body>
</html>